<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>我道</title>
    <meta name="description" content="我叫1900，普通男青年，学过三年编程。湖南人，现在在四川工作。2015年花了26天骑过一次318。有点伪文艺，喜欢比较玄学的东西。性格多变，疑似有人格分裂。" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/screen.css" />
    <link rel="stylesheet" href="/css/iDisqus.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/monokai-sublime.css">


</head>
<body class="home-template" id="s-top">

    <div class="nav">
<div class="nav_body">
  <div class="b_logo"> 
      <a class="blog-logo" href="/"><img src="/img/logo-mini.png" alt="我道" /></a>
  </div>
  <div class="b_class"> 
    <ul>
    	/ || 首页

        <li class="nav-"><a class="" href="/rss">订阅</a></li>

    </ul>
  </div>
</div>
</div>
    <div class="post-bg" style="background-image: url(http://cdn.4zen.top/image/b/70/b696419d965267259b4974ce9c07f.jpg);"></div>
<div class="site-wrapper" page-type="c-post">
<main class="content" role="main">
	<div class="post-toppic" style="">
        <div class="picbox">
          <img node-type="articleHeaderPic" src="http://cdn.4zen.top/image/b/70/b696419d965267259b4974ce9c07f.jpg">
        </div>
     </div>
    <article class="post">

        <header class="post-header">
            <h1 class="post-title">ONE·单栏主题（0.3.0）</h1>
            <section class="post-meta">
                <time class="post-date" datetime="Tue Aug 08 2017 12:26:57 GMT+0800">2017/8/8</time> [object Object]
            </section>
        </header>

        <section class="post-content">
            <p>###ONE<br>这个主题是基于casper主题国内版修改而来的一款单栏主题。</p>
<p><img src="http://cdn.4zen.top/image/a/ea/418ce1ffa29a0ba2f8090189aa53f.png" alt=""></p>
<p>之前偶然刷微博的时候看到了新浪微博的一个文章页面，很喜欢这种大图带文字的形式。所以直接照搬了新浪微博的文章页面。（是不是简直一毛一样。哈哈！）</p>
<p><img src="http://cdn.4zen.top/image/8/24/a54cec27dded0dc49b07bcb10b338.png" alt=""></p>
<p>###一些改动</p>
<p>Casper是一款非常优秀的Ghost博客主题，尤其是国内优化过后的文章样式更是深的我心。文字大小设置适中，阅读起来非常舒适，非常适合文字类的博客。而且因为我的技术水平有限，所以当时的想法是把这2个我喜欢的排版和文字CSS直接结合起来————现在看来我依旧觉得真的是个非常不错的想法。</p>
<p>起初移植的时候没有多平台适应，我自己尝试性做了手机、平板、PC的布局适配，勉强通过。但是不知道会不会有什么奇怪的问题…，到时候出现了再说把。增加了背景大图，自动获取文章设置的大图做为背景。最开始没有做图片磨砂滤镜，感觉有点影响阅读体验，所以加上了背景磨砂滤镜。</p>
<p>###disqus-php-api<br><img src="http://cdn.4zen.top/image/4/f9/58444855c7147a45fc4b34d50ceb0.png" alt=""></p>
<p>由于Ghost博客并没有自带评论系统，所以主题的评论系统得使用第三方组件，自从多说关闭后我就没找到很合适的评论系统————直到在fooleap的博客上发现了新大陆【disqus-php-api】!</p>
<blockquote>
<p>项目地址：<a href="https://github.com/fooleap/disqus-php-api" target="_blank" rel="external">https://github.com/fooleap/disqus-php-api</a> </p>
<p>DEMO地址：<a href="http://blog.fooleap.org/disqus-php-api.html" target="_blank" rel="external">http://blog.fooleap.org/disqus-php-api.html</a></p>
</blockquote>
<p>fooleap做的是国内桥接版的disqus评论，组件会自动检测访客是否处于FQ状态，如果已FQ则直接加载完整版的disqus。如果没有，则自动桥接disqus获得基础的评论功能，即便没有FQ的朋友也可以获得正常的disqus评论体验(建议FQ，可以获得更完善的用户体验)。(而且最新版的居然还有获取文章评论数的api…..，Ghost终于也能显示文章评论数了…)</p>
<p>###一些不关痛痒的配置</p>
<p>关于一些主题BUG可以留言，我有时间就会弄。另外，评论系统的问题去fooleap那里咨询把…我技术能力不足以解答…</p>
<ol>
<li>默认背景大图请修改loop.hbs内12行的图片地址</li>
<li>有文章归档页面，请新增一个文章设置为独立页面，文章slug设置为page-archive-post</li>
<li><a href="http://www.4zen.top" target="_blank" rel="external">DEMO页面就是本站…</a></li>
<li>导航的图标在<a href="http://fontawesome.io/icons/" target="_blank" rel="external">http://fontawesome.io/icons/</a>找到后复制除开<code>fa-</code>之后的内容如：<code>fa-address-book-o</code>只复制<code>address-book-o</code>，然后添加进<code>assets\js\index.js</code>文件31行的数组内，会根据你后台设置的导航菜单顺序自动添加进去。</li>
<li>哦，对了…这个不支持1.x以上的ghost…</li>
<li>待增加…</li>
</ol>
<p><strong>2017年8月16日</strong></p>
<ol>
<li>首页头部做了更新，博客标题和介绍不在和文章列表混合在一起。</li>
<li>修改了一些CSS样式。</li>
<li>增加返回顶部按钮</li>
<li>把之前那个主题的友链页面的CSS搬了过来。</li>
<li>其他的更新忘记还有什么了…</li>
</ol>
<p><strong>2017年8月27日</strong></p>
<ol>
<li>更改了首页头部布局和样式。</li>
<li>参考<a href="https://blog.shuiba.co/archive" target="_blank" rel="external">水八口记</a>完善了文章归档页面。</li>
<li>回到顶部按钮增加了自动隐藏、滚动动画特效。</li>
<li>增加了lightbox图片幻灯片特效</li>
<li>修复了一些js逻辑问题。</li>
<li>修改了一些CSS样式。</li>
<li>忘记还有其他什么更新了，肯定还有就是了….</li>
</ol>
<p>【<a href="http://cdn.4zen.top/ONE.rar" target="_blank" rel="external">下载地址：ONE_0.3.0.rar</a>】</p>

        </section>

        <footer class="post-footer">

            <figure class="author-image">
                <a class="img" href="" style="background-image: url(/img/avatar.png)"><span class="hidden">的头像</span></a>
            </figure>


            <section class="author">
                <h4><a href=""></a></h4>

                    <p>我叫1900，普通男青年，学过三年编程。湖南人，现在在四川工作。2015年花了26天骑过一次318。有点伪文艺，喜欢比较玄学的东西。性格多变，疑似有人格分裂。</p>

                    <p>继续阅读此作者的<a href="http://www.4zen.top">更多文章</a>。</p>

                <div class="author-meta">
                    <span class="author-location icon-location">自贡</span>
                    <span class="author-link icon-link"><a href="http://www.4zen.top">http://www.4zen.top</a></span> 
                </div>
            </section>


            <section class="share">
                <h4>分享此博文</h4>
                <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

            </section>

        </footer>
	<div id="comment"></div>
    </article>

</main>
    <aside class="read-next">
        
        <a class="read-next-story" style="background-image: url(http://cdn.4zen.top/image/f/a5/3fbc534e561b5b053720eeb06fa00.jpg)" href="/meng-yan/">
            <section class="post">
                <h2>梦魇</h2>
                <p>昨天做了个很奇怪、很变态、很恶心的梦。这个梦不和以前一样，以前做梦都是醒了后就几乎记不得梦里发生的事情了…但昨天这个梦我到现在还历历在目….
梦里的时间是夜晚十分，城市车水马龙。我是一个上帝视角，我的&hellip;</p>
            </section>

        </a>
        
        
        <a class="read-next-story prev " style="background-image: url(http://cdn.4zen.top/image/9/aa/9fd99de59781cc04fdad1e21fa7e5.jpg" href="/hei-gui-lian-cheng-ji/">
            <section class="post">
                <h2>黑鬼练成记</h2>
                <p>夏天最喜欢做的三件事情就是玩水、吃西瓜、吹空调了把？
本来上周就约了几个朋友准备自驾去附近城市的水上乐园玩的，但是因为自己有事就鸽了。朋友们无奈把时间后推了一周。选择的地方起初我是打算半个小时之内车程&hellip;</p>
            </section>
        </a>
        
    </aside>

    </div>

    <div class="sidebar">  
        <a href="#s-top" class="s-top" to="#s-top"><i class="fa fa-chevron-up" action-type="goTop"></i></a>
    </div>

    <footer class="site-footer clearfix">
        <section class="copyright"><a href="">我道</a> &copy; </section>
        <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a> &amp; <a href="http://www.ghostchina.com">GhostChina</a></section>
    </footer>

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/plugin.js"></script>
    <script src="/js/index.js"></script>

</body>
</html>
